<template>
  <div class="course-wrap">
    <!-- 课程视频预告 -->
    <!-- <my-video class="course-video" :sources="video.sources" :options="video.options"></my-video> -->
    <div class="course-images">
        <img class="course-preview" :src="previewImage | qnImg(null, 200)">
    </div>
    <div class="information">
        <!-- 教练简介 -->
        <div class="coach-info course-base">
            <div class="coach-pic">
                <img class="coach-img" :src="coachImage | qnImg(null, 200)">
                <div>{{course.coach && course.coach.name}}</div>
            </div>
            <div class="comment coach-comment">{{course.coach && course.coach.description}}</div>
        </div>
        <!-- 课程基础信息 -->
        <div class="course-base">
            <div class="step-title">
                <div class="step-title-left">
                    <van-icon class="step-icon" name="records"/>
                    <span class="step-tip">课程基础信息</span>
                </div>
            </div>
            <van-cell-group>
                <van-cell class="course-info-item" icon="exchange" :title="'¥'+course.origin_price"/>
                <van-cell class="course-info-item" icon="contact" :title="course.person_now + '/' + course.person_limit"/>
                <van-cell class="course-info-item" icon="clock" :title="course.start_time +'到'+course.end_time"/>
                <van-cell class="course-info-item" icon="location" :title="course.address" is-link />
            </van-cell-group>
        </div>
        <!-- 课程简介 -->
        <div class="course-base">
            <div class="step-title">
                <div class="step-title-left">
                    <van-icon class="step-icon" name="records"/>
                    <span class="step-tip">课程简介</span>
                </div>
            </div>
            <div class="course-detail" v-bind:class="{ border_radius: course.images && course.images.length==0 }">
                <div class="comment">
                    {{course.description}}
                </div>
                <div class="course-tag">
                    <van-tag class="course-tag-item" v-for="(item, index) in tags" :key="index" :type="colors[index]">{{item.name}}</van-tag>
                </div>
            </div>
            <div class="course-img" v-if="course.images && course.images.length>0" @click="viewImage($event)">
                <img v-for="(item, index) in course.images" :key="index" :src="item.url">
            </div>
        </div>
        <div class="course-base">
            <div class="step-title">
                <div class="step-title-left">
                    <van-icon class="step-icon" name="records"/>
                    <span class="step-tip">开课时间</span>
                </div>
            </div>
            <div class="course-list">
                <div class="course-content">
                    <div class="course-time-item" v-for="(item, index) in course.subCourses" :key="index">{{item.course_date | date('YYYY-MM-DD')}} {{item.start_time}} - {{item.end_time}}</div>
                </div>
            </div>
        </div>
        <div class="shop-info" v-for="(item, index) in content" :key="index">
            <div class="step-title">
                <div class="step-title-left">
                    <van-icon class="step-icon" name="warn"/>
                    <label class="step-tip">{{item.title}}</label>
                </div>
            </div>
            <div class="comment">{{item.content}}</div>
        </div>
        <!-- 健身步骤 -->
        <div class="course-base">
            <div class="step-title">
                <div class="step-title-left">
                    <van-icon class="step-icon" name="wap-nav"/>
                    <span class="step-tip">健身步骤</span>
                </div>
            </div>
            <van-steps class="course-step" direction="vertical">
                <van-step class="icons">
                    <div class="step-desc">预约付费成功</div>
                </van-step>
                <van-step class="icons">
                    <div class="step-desc">获得入场密码</div>
                </van-step>
                <van-step class="icons">
                    <div class="step-desc">门禁输入密码</div>
                </van-step>
                <van-step class="icons">
                    <div class="step-desc">验证成功入场上课</div>
                </van-step>
            </van-steps>
        </div>
    </div>
    <!-- 约课 -->
    <div class="course-appoint">
        <van-button @click="toOrder" type="primary" v-if="!button_show" :disabled="hasBuy" bottom-action>
            {{button_text}}
        </van-button>
        <van-button type="danger" v-if="button_show" bottom-action>
            {{button_text}}
        </van-button>
    </div>
    <back :scroll="false"></back>
  </div>
</template>

<script>
import myVideo from 'vue-video'
import Wx from 'weixin-js-sdk'
import { ImagePreview } from 'vant'
import back from '../../components/base/back.vue'

export default {
  name: 'course-detail',
  comments: 'course-detail',
  components: {
    myVideo,
    back
  },
  data () {
    return {
      course: {},
      tags: [],
      previewImage: '',
      coachImage: '',
      images: [],
      colors: ['', 'danger', 'primary', 'success'],
      hasBuy: false,
      content: [],
      thumb: './static/images/头像3.jpg'
    }
  },
  computed: {
    button_text: {
      get: function () {
        var text = ''
        if (this.course.status === 2) {
          if (this.hasBuy) {
            text = '已预约'
          } else {
            if (this.course.person_now < this.course.person_limit) {
              text = '预约'
            } else {
              text = '人数已满'
            }
          }
        } else if (this.course.status === 3) {
          text = '进行中'
        } else {
          text = '已结束'
        }
        return text
      },
      set: function () {
      }
    },
    button_show: {
      get: function () {
        if (this.course.status === 2) {
          return false
        } else {
          return true
        }
      },
      set: function () {
      }
    }
  },
  created () {
    this.getCourse()
  },
  methods: {
    toOrder () {
      this.$router.push({
        name: 'pay_course',
        query: {
          course_id: this.course.id
        }
      })
    },
    viewImage (e) {
      ImagePreview(this.images)
    },
    wxConfig (course) {
      this.$axios.post('/wechat/share/config', {
        url: location.href.split('#')[0],
        redirect: location.href.split('?')[0],
        user_id: JSON.parse(localStorage.getItem('user')).id
      }).then(config => {
        const wxConfig = config.data
        Wx.config({
          debug: false,
          appId: wxConfig.appId,
          timestamp: wxConfig.timestamp,
          nonceStr: wxConfig.nonceStr,
          signature: wxConfig.signature,
          jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
        })
        Wx.ready(() => {
          // 分享到朋友圈
          Wx.onMenuShareTimeline({
            title: this.course.name,
            link: wxConfig.shareURL,
            imgUrl: this.course.preview.image,
            success: function () {
              // alert('分享成功！', this.course.preview.image);
            },
            cancel: function () {
              // alert('取消分享！');
            }
          })

          // 分享给朋友
          Wx.onMenuShareAppMessage({
            title: this.course.name,
            desc: this.course.description,
            link: wxConfig.shareURL,
            imgUrl: this.course.preview.image,
            type: 'link',
            dataUrl: '',
            success: function () {
              // alert('分享成功！');
            },
            cancel: function () {
              // alert('取消分享！');
            }
          })
        })
      })
    },
    getCourse () {
      var that = this
      this.$axios.get('/courses/' + this.$router.currentRoute.params.course_id + '?user_id=' + JSON.parse(localStorage.getItem('user')).id).then(response => {
        that.course = response.data
        // 是否已预约
        that.hasBuy = response.data.hasBuy > 0
        that.coachImage = response.data.coach.preview.image
        that.previewImage = response.data.preview.image
        that.course.start_time = that.$date(response.data.start_time)
        that.course.end_time = that.$date(response.data.end_time)
        for (var j = 0; j < response.data.images.length; j++) {
          that.images.push(response.data.images[j].url)
        }
        that.content = response.data.content
        document.title = that.course.name
        that.wxConfig(that.course)
        that.$axios.get('/attributes/course_tags').then(response => {
          for (var i = 0; i < response.data.length; i++) {
            if (response.data[i].id & that.course.tags) {
              that.tags.push(response.data[i])
            }
          }
        })
      })
    }
  }
}
</script>
<style lang="postcss" scoped>
.course-base{
    background-color: #333;
}
.icons{
    color: #cece28;
    text-align: left;
}
.icons span{
    color: white;
}
.icons>div{
    color: white;
}
.van-cell, .van-cell-group{
    background-color:#3c3a3a;
    border-radius: 0px 0px 5px 5px;
}
.van-hairline--top-bottom::after{
    border-width: 0px 0;
}
.course-images{
    overflow: hidden;
}
.course-preview{
    height: 150px;
    width: 100%;
}
.course-wrap{
    margin-bottom: 50px;
}
.course-video{
    width: 100%;
    height: auto;
}
.__cov-video{
    max-height: 100%;
}
.information{
    padding: 0px 5px 8px 5px;
    color: #f8f8f8;
}
.information div:first-child{
    margin-top: 0px;
}
.information>div{
    margin-top: 5px;
    border-radius: 5px;
}
.coach-info{
    min-height: 100px;
    padding: 10px;
}
.coach-pic{
    width: 30%;
    min-height: 100px;
    float: left;
    display: inline;
}
.coach-img{
    height: 60px;
    width: 60px;
    border-radius: 50%;
    margin-top: 10px;
}
.comment{
    text-align: left;
    font-size: 0.8rem;
    text-indent: 2em;
    line-height: 1rem;
    padding: 10px;
}
.coach-comment{
    width: 70%;
    display: inline-block;
    text-indent: 2em;
    padding: 0px;
}
.course-info-item{
    color: #f8f8f8;
    text-align: left;
}
.course-detail{
    background-color: #3c3a3a;
}
.course-tag{
    text-align: left;
    margin: 0px 10px;
}
.course-tag span:first-child{
    margin-left: 0px;
}
.course-tag-item{
    margin-left: 3px;
    margin-bottom: 3px;
}
.border_radius{
    border-radius: 0px 0px 5px 5px;
}
.course-img{
    width: auto;
    height: 100px;
    display: inline-flex;
    overflow-x: scroll;
    padding: 10px;
    background-color: #3c3a3a;
    border-radius: 0px 0px 5px 5px;
}
.course-img img{
    width: 49%;
    float: left;
    display: inline;
    margin-left: 2%;
}
.course-img img:first-child{
    margin-left: 0px;
}
.course-time-item{
    padding: 2px;
    border-bottom: 1px solid #666;
}
.course-step{
    background-color: #3c3a3a;
    border-radius: 0px 0px 5px 5px;
}
.step-title {
    height: 1.4rem;
    line-height: 1.4rem;
    font-size: 1rem;
    text-align: left;
    color: #f8f8f8;
    padding: 5px 10px;
    position: relative;
    border-radius: 5px 5px 0px 0px;
    background-color: #333;
}
.step-title-left{
    display: flex;
    justify-content: center;
    float: left;
}
.step-icon{
    color: yellow;
    align-self: center;
}
.step-tip{
    margin-left: 8px;
}
.step-desc{
    color: #f8f8f8;
}
.course-appoint{
    position: fixed;
    bottom: 0px;
    width: 100%;
    z-index: 999;
}
.shop-info{
    background-color: #3c3a3a;
    border-radius: 5px;
}
.course-list{
    min-height: 50px;
}
.course-list>div{
    border-bottom: 1px solid #888;
}
.course-list div:first-child{
    margin-top: 0px;
}
.course-list div:last-child {
    border: none;
}
.course-time{
    color:yellow;
}
</style>
